<template>
  <div class="main-box max-width divscroll">
    <van-row class="body-box">
        <img src="@/assets/images/head-title.png" class="pic">
    </van-row>
    <van-row class="vote-main">
        <van-row class="itme-display" v-for="(deptInfo, index) in voteList" :key="index">
          <van-row class="title">
            <van-row class="untname">{{deptInfo.unitName}}</van-row>
            <!-- <span v-if="sub.excellentMaxCount!=null" style="font-size: 12px;">（优秀不超过{{sub.excellentMaxCount}}人）</span> -->
          </van-row>
          <!-- <van-row class="subtitle"><h5>高评组</h5></van-row> -->
          <!-- class="on" 是高亮 -->
          <van-row :class='["vote-box "+(userInfo.active?"on":"")]' v-for="(userInfo,idx) in deptInfo.subList" :key="idx">
            <van-col>
              <van-row class="vote-top">
                <van-col class="name">{{userInfo.userName}}<span> - {{userInfo.voteReviewerTypeName}}</span></van-col>
                <!-- <van-col class="fraction">{{items.quantifiedScore==null?'0':items.quantifiedScore}}</van-col> -->
              </van-row>
              <van-row class="vote-item" justify="center">

                <van-col class="vote-block">
                  <van-row class="name">{{ selectedList[0].unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="userInfo.keyTasks" direction="horizontal" class="display-vote">
                        <!-- <van-radio checked-color="#29b336" v-for="(score,id) in selectedList[0].scoreList" @click="changeVote(userInfo,deptInfo,index)" :key="id" :name="score.voteScore">{{ score.voteScore }}</van-radio> -->
                        <van-radio checked-color="#29b336" :name="40" @click="changeVote(userInfo,deptInfo,index)">很好</van-radio>
                        <van-radio checked-color="#29b336" :name="30" @click="changeVote(userInfo,deptInfo,index)">较好</van-radio>
                        <van-radio checked-color="#29b336" :name="20" @click="changeVote(userInfo,deptInfo,index)">一般</van-radio>
                        <van-radio checked-color="#29b336" :name="10" @click="changeVote(userInfo,deptInfo,index)">未完成</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col class="vote-block">
                  <van-row class="name">{{ selectedList[1].unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="userInfo.progress" direction="horizontal" class="display-vote">
                        <!-- <van-radio checked-color="#29b336" v-for="(score,id) in selectedList[0].scoreList" @click="changeVote(userInfo,deptInfo,index)" :key="id" :name="score.voteScore">{{ score.voteScore }}</van-radio> -->
                        <van-radio checked-color="#29b336" :name="40" @click="changeVote(userInfo,deptInfo,index)">很好</van-radio>
                        <van-radio checked-color="#29b336" :name="30" @click="changeVote(userInfo,deptInfo,index)">较好</van-radio>
                        <van-radio checked-color="#29b336" :name="20" @click="changeVote(userInfo,deptInfo,index)">一般</van-radio>
                        <van-radio checked-color="#29b336" :name="10" @click="changeVote(userInfo,deptInfo,index)">未完成</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col class="vote-block">
                  <van-row class="name">{{ selectedList[2].unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="userInfo.collaboration" direction="horizontal" class="display-vote">
                        <van-radio checked-color="#29b336" :name="10" @click="changeVote(userInfo,deptInfo,index)">很好</van-radio>
                        <van-radio checked-color="#29b336" :name="7.5" @click="changeVote(userInfo,deptInfo,index)">较好</van-radio>
                        <van-radio checked-color="#29b336" :name="5" @click="changeVote(userInfo,deptInfo,index)">一般</van-radio>
                        <van-radio checked-color="#29b336" :name="2.5" @click="changeVote(userInfo,deptInfo,index)">未完成</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col class="vote-block">
                  <van-row class="name">{{ selectedList[3].unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="userInfo.teamBuilding" direction="horizontal" class="display-vote">
                        <!-- <van-radio checked-color="#29b336" v-for="(score,id) in selectedList[0].scoreList" @click="changeVote(userInfo,deptInfo,index)" :key="id" :name="score.voteScore">{{ score.voteScore }}</van-radio> -->
                        <van-radio checked-color="#29b336" :name="10" @click="changeVote(userInfo,deptInfo,index)">很好</van-radio>
                        <van-radio checked-color="#29b336" :name="7.5" @click="changeVote(userInfo,deptInfo,index)">较好</van-radio>
                        <van-radio checked-color="#29b336" :name="5" @click="changeVote(userInfo,deptInfo,index)">一般</van-radio>
                        <van-radio checked-color="#29b336" :name="2.5" @click="changeVote(userInfo,deptInfo,index)">未完成</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col>





                <!-- <van-col class="vote-block" v-for="(item,ids) in selectedList" :key="ids">
                  <van-row class="name">{{ item.unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="userInfo[item.voteType]" direction="horizontal" class="display-vote">
                        <van-radio checked-color="#29b336" v-for="(score,id) in item.scoreList" @click="changeVote(userInfo,deptInfo,index)" :key="id" :name="score.voteScore">{{ score.voteScore }}</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col> -->
              </van-row>
            </van-col>
            <van-col class="tag">{{idx+1}}</van-col>
          </van-row>
        </van-row>
    </van-row>
    <van-row v-if="!hasVoted" class="bnt-bottom-box">
      <van-col class="input">
       <van-checkbox v-model="checked" class="sel" @click="selectAll()">{{votetit}}</van-checkbox>
      </van-col>
      <van-button type="default" class="button"  @click="onSubmit">确定提交</van-button>
    </van-row>
    <van-popup v-model:show="showDept"  :close-on-click-overlay="false" style="background-color:transparent;">
      <van-row class="tisp-box">
        <van-col class="tisp-tit" style="height: 8rem;"></van-col>
        <van-col class="tisp-content">
          <van-row class="select">
            <!-- <van-dropdown-menu>
              <van-dropdown-item v-model="deptId" :options="deptList" />
            </van-dropdown-menu> -->
            <!-- <van-picker v-model="deptId" title="请选择平台" :columns="deptList" /> -->
            <van-field
              v-model="deptName"
              label="科研平台"
              placeholder="请先选择投票平台"
              @click="showDeptDetail = true"
            />
            
          </van-row>
        </van-col>
        <van-button type="default" class="button" style="margin-top:3.5rem;padding:0 5rem;font-weight: 700;" @click="goVote()">开始投票</van-button>
      </van-row>
    </van-popup>
    <van-popup v-model="tisBox" :close-on-click-overlay="false" style="background-color:transparent;">
      <van-row class="tisp-box">
        <van-col class="tisp-tit">消息提醒</van-col>
        <van-col class="tisp-content">
          您投票已完成
          <span>可实时查看投票结果！</span>
        </van-col>
        <van-button type="default" class="button" @click="hidePopup">马上去看看</van-button>
      </van-row>
    </van-popup>
    <div class="block_80"></div>
    <van-popup v-model:show="showDeptDetail" position="bottom">
      <div>
        <van-picker
                :columns="deptList"
                @cancel="showDeptDetail = false"
                @confirm="onDeptConfirm"
                :show-toolbar="true"
              />
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "vote",
  data() {
    return {
      votetit:'全选较好',
      tisBox: false,
      checked: false,
      username: '',
      hasVoted: false,
      //选择器
      deptId: null,
      deptName: null,

      deptList: [],
      showDept: false,
      showDeptDetail: false,

      voteList: [],

      selectedList:[
        {
          unitName:'工作重点',
				  voteType: 'keyTasks',
          scoreList: [
            {
              voteScore:'40',
              voteStatus:false
            },
            {
              voteScore:'30',
              voteStatus:false
            },
            {
              voteScore:'20',
              voteStatus:false
            },
            {
              voteScore:'10',
              voteStatus:false
            }
          ]
        },
        {
				  voteType: 'progress',
          unitName:'工作进展',
          scoreList: [
            {
              voteScore:'40',
              voteStatus:false
            },
            {
              voteScore:'30',
              voteStatus:false
            },
            {
              voteScore:'20',
              voteStatus:false
            },
            {
              voteScore:'10',
              voteStatus:false
            }
          ]
        },
        {
				  voteType: 'collaboration',
            unitName:'工作协同',
            scoreList: [
              {
                voteScore:'40',
                voteStatus:false
              },
              {
                voteScore:'30',
                voteStatus:false
              },
              {
                voteScore:'20',
                voteStatus:false
              },
              {
                voteScore:'10',
                voteStatus:false
              }
            ]
          },
          {
            unitName:'团队建设',
				  voteType: 'teamBuilding',
          scoreList: [
            {
              voteScore:'40',
              voteStatus:false
            },
            {
              voteScore:'30',
              voteStatus:false
            },
            {
              voteScore:'20',
              voteStatus:false
            },
            {
              voteScore:'10',
              voteStatus:false
            }
          ]
        }
      ],
      
      voteStatusList:[],
      form:{
        data: this.$route.query.data,
        // data: '8CBA4295B735AB496A4454CCA27561347A9B6C6B2C009988DFC0DFF7513FDDD68C911604AD3F9099C5599937BD212BAB',//this.$route.query.data,
        voteStatusList:[
          // {voteStatus:null,userName:null,quantifiedScore:null}
        ]
      }
    }
  },
  created() {
    //this.getVoteList();
    this.getVoteInfo();
    this.userIsVoted();
    // this.userIsVoted();
  },
  methods: {
    onSubmit(){

      let hasVote=true;

      this.voteList.forEach((sub,index) => {
        sub.subList.forEach((item,idx) => {
          if(item.voteStatus==null || !item.voteStatus){
            item.active = true;
            hasVote = false;
            
          }
          let params = {
            id:item.id,
            userNo:item.mobile,
            voteStatus:item.voteStatus,
            userName:item.userName,
            keyTasks: item.keyTasks,
            progress: item.progress,
            collaboration: item.collaboration,
            teamBuilding: item.teamBuilding,
            voteReviewerType: item.voteReviewerType,
          }
          this.form.voteStatusList.push(params);
        })
        this.$set(this.voteList,index,sub);
      });

      
      if(!hasVote){
        this.$toast("您还有未选择的投票!");
        // this.$set(this,'list',this.list);
        this.form.voteStatusList=[];
        return 
      }

      this.$dialog.confirm({  title: '确认', message: '是否确认提交投票信息，提交后不可修改！',})
      .then(() => {

        
        this.$toast.loading({duration: 0, message: '提交中...', forbidClick: true,});
        // 提交请求
        this.$axios.vote.updateResult(this.form).then((res) => {
          this.$toast.clear();
          if(res.data.code==0){
            this.$toast("投票成功!");
            this.hasVoted=true;
            this.tisBox = true;
            return ;
          }
          this.$toast(res.data.msg);
        }).catch((err) => {
          this.$toast("服务器请求失败~");
          this.$toast.clear();
        })
      })
      .catch(() => {
        // on cancel
      });


    },

    getDeptList(){

      this.$axios.vote.getDeptList({data:this.form.data}).then((res) => {

        // 领导不需要选择
        if(res.data.code === 500305001){
          this.getVoteList()
          return;
        }
        this.showDept = true;

        var list = res.data.data;      
        list.forEach((item,index) => {
          var dept = {text:item.name,value:item.id}
          this.deptList.push(dept);
        });
      })
    },




    hidePopup(){
      this.tisBox = false;
    },
    goVote(){

      if(this.deptId==null || this.deptId==''){
        this.$toast("请先选择科研平台");
        return;
      }

      this.showDept = false;
      this.getVoteList();
    },
    changeVote(item,sub,subIndex){

      item.active = false;
      if(item.keyTasks!=0 && item.progress!=0 && item.collaboration!=0 && item.teamBuilding!=0){
        item.voteStatus=true;
      }else{
        item.voteStatus=false;
      }
      this.$set(this.voteList,subIndex,sub);


      // let excellentCount = sub.subList.filter(s=>s.voteStatus==1).length;
      // if(excellentCount >sub.excellentMaxCount){
      //   this.$toast('优秀人数不能超过'+sub.excellentMaxCount+"人");
      //   item.active = true;
      //   item.voteStatus=null;
      // }else{
      //   item.active = false;
      // }
      // this.$set(this.voteList,subIndex,sub);

    },


    //全选合格、取消合格
    selectAll(){
      let tisp=this.checked?'全选较好':'取消全选较好';
      this.$dialog.confirm({  title: '确认', message: '是否确认'+tisp+'，'+tisp+'后之前选项也会改变！',})
      .then(() => {
        let val = this.checked?30:null;
        let val2 = this.checked?7.5:null;
        this.voteList.forEach((item,index) => {
          item.subList.forEach((items,idx) => {
            items['keyTasks'] = val;
            items['progress'] = val;
            items['collaboration'] = val2;
            items['teamBuilding'] = val2;
            items.voteStatus=true;
          })
          this.votetit=this.checked?'取消全选较好':'全选较好';
          this.$set(this.voteList,index,item);
        })
        
      })
      // .catch(() => {
      //   this.checked =!this.checked;
      // });

    },
    getVoteList(){
      this.$axios.vote.voteList({data:this.form.data,deptId:this.deptId}).then((res) => {
        this.voteList = res.data.data;
        this.voteList.forEach((sub,index) => {
          sub.subList.forEach((item,idx) => {
            item.active = false;
            if(item.voteReviewerType=='1'){
              item.voteReviewerTypeName = '组长'
            }
            if(item.voteReviewerType=='2'){
              item.voteReviewerTypeName = '组员'
            }
          })
        });
        
      }).catch((err) => {
        // this.$toast("服务器请求失败~");
      })
    },
    userIsVoted(){
      this.$axios.vote.userIsVote({data:this.form.data}).then((res) => {
        if(res.data.data){
          this.$axios.vote.votedResultList({data:this.form.data}).then(res=>{
            this.voteList = res.data.data;
            this.tisBox = true;
            this.hasVoted = true;
          })
        }else{
          this.hasVoted = false;
          this.getDeptList()
        }

      }).catch((err) => {
        this.$toast("服务器请求失败~");
      })
    },

    getVoteInfo(){
      this.$axios.vote.voteInfo({data:this.form.data}).then((res) => {
        if(res.data.data){
          let vote =res.data.data;
          let currDate = new Date();
          let betweenTime = vote.beginTime>currDate || vote.endTime<currDate
          if(!vote.isPush || betweenTime){
            vote.data = this.form.data
            this.$router.push({
                name: "tips",
                params: { vote: vote },
            });
          }
        }

      })
    },

    onDeptConfirm(selected) {
      this.deptId = selected.value;
      this.deptName = selected.text;
      this.showDeptDetail = false;
    }
  },

};
</script>
<style lang="scss" scoped>
.main-box{
  background-color: #e5f2ff !important;
}
.van-popup{
  overflow-y: visible !important;
}
.subtitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 1rem 0;
  &:before{
    content: '';
    height: 1px;
    background-color: #E4E4E4;
    flex:1;
  }
  h5{
    margin:0 .5rem;
    background-color: #FFF;
    padding: .25rem 2rem;
    border-radius: .25rem;
    color:#666;
  }
  &:after{
    content: '';
    height: 1px;
    background-color: #E4E4E4;
    flex:1;
  }
}
.tisp-box{
  background-image: url('../assets/images/tisp-bg.png');
  background-repeat: no-repeat;
  background-position: top center;
  width: 18.75rem;
  height: 23.75rem;
  background-size: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .tisp-tit{
    font-size: $wdr-oneTitle-fontSize;
    line-height: 7.75rem;
    color: #FFF;
    font-weight: 700;
  }
  .tisp-content{
    width: 86%;
    margin-top: 3.725rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $wdr-twoTitle-fontSize;
    font-weight: 700;
    span{
      color: $wdr-assist-fontColor;
      font-size: $wdr-main-fontSize;
      font-weight: normal;
    }
    .select{
      width: 100% !important;
      ::v-deep .van-field{
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        background-color: transparent !important;
        .van-field__label{
          text-align: center;
          width: 100%;
          margin: 0;
        }
        .van-field__control{
          text-align: center;
          font-size: .75rem;
        }
        .van-cell__value{
          border-radius: 1rem;
          border: 1px solid #E4E4E4;
          padding: .5rem;
          position: relative;
          margin-top: .5rem;
          margin-left: 5px;
          &:before{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent;
            border-bottom-color: transparent;
            border-style: solid;
            border-width: 6px;
            // background-color: #E4E4E4;
            border-top-width: 0;
            border-bottom-color: currentColor;
            top: -6px;
            left: 50%;
            margin-left: -6px;
          }
          ::after{
            content: '';
            z-index: 9;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
      .van-dropdown-menu__bar{
        border-radius: 2rem;
      }
      .van-overlay{
        background-color: transparent !important;
      }
      .van-dropdown-item__content{
        width: 80% !important;
        margin: 0 2rem !important;
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2) !important;
        border-radius: 1rem;
        overflow: hidden;
      }
      .van-dropdown-item{
        // z-index: 99999;
        bottom:0 !important;
        top: 17rem !important;
        overflow: initial !important;
      }
      .van-dropdown-menu__title{
        width: 80% !important;
        padding: 0 !important;
      }
      // .van-dropdown-item__option{
      //   margin: 0 1rem;
      // }
    }
  }
  .button{
    margin-top: 2rem !important;
    background-color: #3b3fc0;
    color: #FFF;
    border-radius: 1.875rem;
    padding: 0 1.25rem;
    border: 0;
    font-weight: 700 !important;
  }
}
.bnt-bottom-box{
  height: 3.75rem;
  background-color: #1d92ff;
  position: fixed;
  width: 100%;
  padding: 0 .625rem;
  bottom: 0;
  left: 0;
  display: flex;
  // justify-content: center;
  align-items: center;
  justify-content: space-between;
  .input{
    flex: 1;
    color: #FFF !important;
    font-size: $wdr-threeTitle-fontSize;
    .sel{
      display: inline-flex;
      ::v-deep .van-checkbox__label{
        color: #FFF !important;
      }
    }
  }
  .button{
    min-width: 9.375rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 5px 5px -4px #1c81df;
    color: #1d92ff !important;
    .van-button__text{
      font-size: $wdr-threeTitle-fontSize;
      font-weight: 700 !important;
    }
  }
}
.body-box{
  background-color: transparent !important;
  background-image: url('../assets/images/head-bg.png');
  background-repeat: no-repeat;
  background-position: center -2.5rem;
  margin: 0 auto;
  height: 30.9vh;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .pic{
    display: flex;
    width: 72vw;
    margin-top: -10vw;
  }
  // &:after{
  //   border: 0;
  // }
}
.vote-main{
  margin-top: -2.5rem !important;
  .itme-display{
    .title{
      background-image: url(../assets/images/moduleBg.png);
      background-position: center;
      background-size: contain;
      .untname{
        background-image: url(../assets/images/moduleClassification.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 3.5rem;
        line-height: 3.5rem;
        color: #FFF;
        // border-radius: 1.25rem 1.25rem 0 0;
        padding: 0 .9375rem;
        font-weight: 700;
        text-align: center;
        font-size: $wdr-threeTitle-fontSize;
      }
    }
    .vote-box{
      &.on{
        // border:1px solid red;
        box-shadow: 0 0 5px 2px red;
      }
      margin: .725rem .725rem 0 .725rem;
      background-color: #FFF;
      display: flex;
      flex-direction: column;
      border-radius: .625rem;
      position: relative;
      .tag{
        position: absolute;
        right: 0;
        background-color: #1d92ff;
        color:#FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 1.875rem;
        border-radius: 0 .625rem 0 .9375rem;
      }
      .display-vote{
        padding: .625rem;
      }
      .vote-top{
        display: flex;
        justify-content: space-between;
        padding: .625rem .625rem 0 .625rem;
        .name{
          flex: 1;
          color: #4d88ef;
          font-weight: 700;
          font-size: $wdr-threeTitle-fontSize !important;
          span{
            font-size: .725rem !important;
            color: $wdr-assist-fontColor !important;
            font-weight: normal;
          }
        }
        .fraction{
          color:red;
          padding-right: 2.5rem;
        }
      }
      .vote-item{
        padding: .625rem;
        display: flex;
        .vote-block{
          border:1px solid #E4E4E4;
          border-radius: .5rem;
          flex:1;
          width: auto;
          .name{
            font-size: .75rem;
            padding: .525rem .625rem 0 .625rem;
            font-weight: 700;
          }
          .radio-box{
            .van-col{
              width: 100%;
            }
            ::v-deep .van-radio__label{
              font-size: .725rem !important;
            }
            .van-radio{
              margin-right:0 !important;
            }
            .display-vote{
              flex-direction: column;
            }
            .van-radio+.van-radio{
              margin-top: .6rem;
            }
          }
        }
        .vote-block+.vote-block{
          margin-left: .6rem;
        }
      }
      .van-field{
        background-color: transparent !important;
      }
      .van-radio{
        font-size: $wdr-main-fontSize !important;
      }
      .van-radio:last-child{
        margin-right: 0;
      }
    }
  }
  .itme-display+.itme-display{
    margin-top: 1.25rem;
  }
}
</style>